<template>
    <div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
  <el-row>
      <el-col>
          <el-button type="primary" @click="add">添加分类</el-button>
      </el-col>
  </el-row>
    <tree-table :data="catelist" :columns="columns" :selection-type="false"
    :expand-type="false" show-index index-text="#" border>
    <template slot="isok" slot-scope="scope">
        <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: green"></i>
        <i class="el-icon-error" v-else style="color: red"></i>
    </template>
    <template slot="order" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
        <el-tag size="mini" type="success"
        v-else-if="scope.row.cat_level===1">二级</el-tag>
         <el-tag size="mini" type="warning" v-else>三级</el-tag>
    </template>
    <template slot="opt" >
        <el-button type="primary" icon="el-icon-edit" circle size="small" style="margin-right:10px"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle size="small" style="margin-right:10px"></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle size="small"></el-button>
    </template>
    </tree-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="  querInfo.pagenum"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="  querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="分类名称" :label-width="formLabelWidth">
         <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="父级分类" :label-width="formLabelWidth">
       <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>


</el-card>
    </div>
</template>

<script>
export default {
  data(){
      return {
          querInfo: 
          {
            type: 3,
              pagenum: 1,
              pagesize: 5,
          }
          ,
          catelist: [],
          total: 0,
          columns: [{
              label: '分类名称',
              prop: 'cat_name'
          },{
              label: '是否有效',
              type: 'template',
              template: 'isok'
          },{
              label: '排序',
              type: 'template',
              template: 'order'
          },{
              label: '操作',
              type: 'template',
              template: 'opt'
          }],
          dialogFormVisible:false,
           formLabelWidth: '100px',
           form: {
             name:'一级',
             region: '二级'
           }
      }
  },
  created() {
      this.getCateList()
  },
  methods: {
  async    getCateList(){
const {data: res} =await this.$http.get('categories',{
    params: this.querInfo
})
if(res.meta.status != 200){
    return this.$message.error('获取商品分类失败')
}
this.catelist = res.data.result
this.total = res.data.total
      },
      handleSizeChange(newSize){
          this.querInfo.pagesize = newSize
          this.getCateList()
      },
      handleCurrentChange(newPage){
         this.querInfo.pagesize = newPage
         this.getCateList()
      }
,
add(){
  this. dialogFormVisible=true
}
  }
}
</script>
<style lang="less" scoped>
    
</style>
